<template>
  <div class="certificate-list">
    <van-nav-bar title="我的证书" left-arrow :fixed="true" :placeholder="true" :z-index="999" :safe-area-inset-top="true"
      @click-left="goBack" />

    <div class="fileter">
      <div class="search">
        <van-search v-model="searchValue" show-action placeholder="请输入搜索关键词" background="#fff" @search="confirmSearch"
          @cancel="cancelSearch" />
      </div>

    </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div class="course-list">
        <div class="nodata" v-if="!loading && certificateList.length == 0">
          <img src="@static/img/nodata.png" alt="" />
        </div>
        <div class="course-item" v-for="(item, index) in certificateList" :key="index" @click="gotoDetail(item)">
          <div class="course-cont">
            <div class="img">
              <img :src="item.certImage" alt="" v-if="item.certImage" />
              <img :src="item.coverImg" alt="" v-else />
            </div>
            <div class="name">{{ item.certTitle }}</div>
          </div>
        </div>
      </div>
    </van-list>


  </div>
</template>

<script>

export default {
  name: 'certificate',
  components: {},
  data() {
    return {
      searchValue: '',
      certificateList: [],
      loading: false,
      finished: false,
      isShow: false,
      page: 1,
      pageSize: 10,
      params: {}
    }
  },
  computed: {},
  mounted() {

  },
  methods: {
    goBack() {
      this.$router.replace({
        path: '/mine'
      })
    },

    // 获取证书列表
    getCertificateList() {
      this.certificateList = []
      this.loading = false
      this.finished = true

    },
    // 确认搜索
    confirmSearch() {

      this.certificateList = []
      this.page = 1
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 取消搜索
    cancelSearch() {

      this.searchValue = ''
      this.certificateList = []
      this.page = 1
      this.finished = false
      this.loading = true
      this.onLoad()
    },
    // 前往详情也
    gotoDetail(item) {
      this.$router.push({
        name: 'certificateDetail',
        query: {
          certificateId: item.uuid
        }
      })
    },
    onLoad() {
      console.log('加载')
      this.getCertificateList()
    }
  }
}
</script>

<style scoped lang="less">
@import 'index';
</style>
